<script src="/js/jquery-2.1.0.min.js"></script>
<!-- { "template" : "file.tmpl" } -->

<script src="/js/jquery-ui-1.10.4.custom.min.js"></script>
<style>
	.hidden		{ display: none; }
</style>	
<script>
function fmlElement(tag, attr, content){
	var hasAttr = true;
	
	if (typeof(attr) !== typeof({})){
		content = attr;
		hasAttr = false;
	}
	var out = $("<"+tag+">");
	
	if (hasAttr){
		out.attr(attr);
	}
	out.html(content);
	
	return out;
}

$(function(){
	var vars = {};
	$("var").addClass("hidden");
	$("var").each(function(i){
		vars[$(this).attr("id")] = $(this).html();
		console.log("VAR: " + $(this).attr("id") + " = " + $(this).html());
	});
	
	$("html").append($("body"));
	$("body").append($("<h1>").text("Hello World!"));
	
	var div = function(attr, content){ return fmlElement("div", attr, content); };
	$("body").append(div({ "class" : "test" }, "Lorem ipsom declorem."));
	$("body").append(div({ "id" : "sample" }, $("#v").html()));
	$("body").append(div($("#x").html()));
});
</script>
<div id="msg" class="hidden"> This is a long bit of text I'm putting into a div in order to get the string more easily. </div>
<var id="v"> This is a test to see how the custom tag works out. </var>
<var id="x"> This is another test, not as long winded. </var>